/* 
    学习目标：生命周期的卸载阶段
    1. componentWillUnmount

    作用：
    1. 清除定时器
    2. 清除一些监听的全局事件
    
  */

import React from 'react';

export default class App extends React.Component {
  state = {
    msg: 'Hello React',
    isShow: true,
  };

  render() {
    return (
      <div>
        {this.state.isShow && <Son msg={this.state.msg}></Son>}
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>点我改变isShow</button>
      </div>
    );
  }
}

class Son extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('我仍在执行');
      this.setState({ count: this.state.count + 1 });
    }, 100);
  }

  // cwun
  componentWillUnmount() {
    clearInterval(this.timer);
    console.log('componentWillUnmount 被执行了，组件要被卸载了');
  }

  render() {
    return (
      <div>
        <h1>{this.props.msg}</h1>
        <h2>{this.state.count}</h2>
      </div>
    );
  }
}
